import React from "react";
import { appContext } from "../AppState";
import styles from "./Robot.module.css";
// import { withAddToCart } from '../hooks/AddToCart';
import { useAddToCart } from "../hooks/AddToCart";
export interface RobotProps {
  id: number;
  name: string;
  email: string;
  // addToCart: (id, name) => void;
}
const Robots: React.FC<RobotProps> = ({ id, name, email }) => {
  const value = React.useContext(appContext);

  const addToCart = useAddToCart();
  return (
    <div className={styles.cardContainer}>
      <img alt="robot" src={`https://robohash.org/${id}`} />
      <h2>{name}</h2>
      <p>{email}</p>
      <p>{value.username}</p>
      <button
        onClick={() => {
          addToCart(id, name);
        }}
      >
        加入购物车
      </button>
    </div>
  );
};
export default Robots;
// export default withAddToCart(Robots)
